30天用React打造AI工具箱 Day12

用Tailwind打造版面骨架

什麼是Tailwind？

Tailwind CSS是一個「功能類別優先 (Utility-first)」的CSS框架。
但在Tailwind裡，我們可以直接在className裡組合樣式：
例如：

<button class="bg-blue-600 text-white px-3 py-2 rounded-md">按鈕</button>

它的好處有三個：

• 不用自己寫CSS檔，直接用內建class就能快速完成排版。
• 改版速度快，修改class即可立刻看到變化。
• 一致性高，整個專案都使用統一的class系統，不會出現「一堆重複又微妙不同的CSS」。

版面規劃

我們今天要來設計一個兩欄式：

• 左邊：側邊選單 (Sidebar)
• 右邊：主要內容區 (Main Content)

這是之後AI工具箱的骨架

程式碼

export default function Layout(){
  return (
    <div className="min-h-screen flex">
      {/* 側邊選單 */}
      <aside className="w-64 bg-gray-800 text-white p-6 space-y-4">
        <h2 className="text-xl font-bold mb-6">AI工具箱</h2>
        <nav className="space-y-2">
          <button className="block w-full text-left px-3 py-2 rounded hover:bg-gray-700">
            待辦清單
          </button>
          <button className="block w-full text-left px-3 py-2 rounded hover:bg-gray-700">
            Chat工具
          </button>
          <button className="block w-full text-left px-3 py-2 rounded hover:bg-gray-700">
            翻譯工具
          </button>
        </nav>
      </aside>

      {/* 主要內容 */}
      <main className="flex-1 bg-gray-50 p-6">
        <h1 className="text-2xl font-bold mb-4">這裡是主要內容區</h1>
        <p>未來不同功能會顯示在這裡。</p>
      </main>
    </div>
  )
}

接著把上面這段程式套用到App.jsx中

import Layout from "./Layout"

export default function App(){
  return <Layout/>
}